<?xml version="1.0" encoding="UTF-8"?>
<html
    xmlns:ft="https://github.com/OpenType/fonttest"
    xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Vollkorn|Vollkorn:i"/>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
<h3 id="CFF2-1">CFF2–1: Variations</h3>

<div class="desc">
  The <a href="../fonts/AdobeVFPrototype-Subset.otf">font</a> for this test
  case is a subset
  of <a href="https://github.com/adobe-fonts/adobe-variable-font-prototype"
  >Adobe’s Variable Font Prototype</a>, a variable font in the
  <a href="https://www.microsoft.com/typography/otspec/cff2.htm">Compact
  Font Format (CFF) Version 2</a>. If your implementation is correct,
  the dollar sign should change its weight in the rendering below. For
  most weights, the dollar glyph should be fully stroked. But for the
  boldest weights, you should see a glyph variant where the stroke is
  only partial.
</div>

<table>
  <tr>
    <th></th>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    <td>700</td>
    <td>800</td>
    <td>900</td>
  </tr>
  <tr>
    <th>Expected</th>
    <td class="expected" ft:id="CFF2-1/100" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:100"><svg version="1.1" viewBox="0 -335 492 1253"><symbol id="CFF2-1/100.dollar" overflow="visible"><path d="M245,14 C187,14 147,26 101,68 L141,23 L116,116 C110,142 95,149 81,149 C65,149 55,141 52,125 C71,40 137,-13 244,-13 C347,-13 435,46 435,156 C435,229 405,295 271,349 L247,358 C159,393 118,438 118,505 C118,592 177,637 261,637 C310,637 346,625 389,584 L347,628 L372,535 C380,510 394,502 408,502 C423,502 434,510 437,526 C418,613 347,665 258,665 C160,665 78,606 78,499 C78,414 128,361 223,320 L260,304 C366,258 395,216 395,152 C395,65 333,14 245,14 Z M267,330 L267,758 L240,758 L240,330 Z M240,-115 L267,-115 L267,330 L240,330 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/100.dollar" /></svg></td>

    <td class="expected" ft:id="CFF2-1/200" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:200"><svg version="1.1" viewBox="0 -335 494 1253"><symbol id="CFF2-1/200.dollar" overflow="visible"><path d="M246,22 C195,22 153,31 107,64 L152,22 L130,109 C122,145 104,154 86,154 C68,154 57,145 51,128 C65,42 136,-13 243,-13 C359,-13 445,52 445,161 C445,237 410,303 276,354 L247,365 C165,395 125,437 125,503 C125,585 183,627 263,627 C305,627 341,618 384,586 L338,627 L360,540 C369,505 387,495 404,495 C421,495 434,503 439,521 C425,608 351,663 257,663 C153,663 70,596 70,491 C70,400 125,347 224,307 L261,293 C359,253 390,215 390,151 C390,69 332,22 246,22 Z M271,327 L271,755 L239,755 L239,327 Z M239,-115 L271,-115 L271,327 L239,327 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/200.dollar" /></svg></td>

    <td class="expected" ft:id="CFF2-1/300" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:300"><svg version="1.1" viewBox="0 -335 496 1253"><symbol id="CFF2-1/300.dollar" overflow="visible"><path d="M247,29 C203,29 159,36 113,60 L163,22 L144,102 C134,148 113,160 92,160 C71,160 58,150 51,131 C59,44 136,-13 243,-13 C371,-13 454,58 454,166 C454,246 416,311 281,360 L247,372 C171,398 131,435 131,500 C131,578 189,617 265,617 C300,617 336,610 378,587 L329,625 L348,545 C359,500 381,487 401,487 C419,487 434,497 441,517 C432,603 354,661 256,661 C145,661 63,586 63,483 C63,387 122,333 224,295 L261,281 C351,247 386,214 386,151 C386,74 330,29 247,29 Z M276,324 L276,752 L239,752 L239,324 Z M238,-115 L275,-115 L275,324 L238,324 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/300.dollar" /></svg></td>

    <td class="expected" ft:id="CFF2-1/400" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:400"><svg version="1.1" viewBox="0 -335 500 1253"><symbol id="CFF2-1/400.dollar" overflow="visible"><path d="M248,35 C208,35 164,40 118,58 L172,21 L155,98 C144,151 122,164 97,164 C74,164 60,153 51,132 C54,45 135,-14 243,-14 C381,-14 464,63 464,170 C464,253 422,318 287,365 L249,378 C178,401 139,435 139,498 C139,573 195,609 269,609 C299,609 335,604 377,587 L324,623 L340,548 C352,495 378,481 401,481 C420,481 438,491 445,513 C440,599 360,658 258,658 C140,658 57,578 57,476 C57,376 119,322 225,285 L262,272 C346,242 382,212 382,149 C382,76 329,35 248,35 Z M281,321 L281,749 L239,749 L239,321 Z M238,-115 L279,-115 L279,321 L238,321 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/400.dollar" /></svg></td>

    <td class="expected" ft:id="CFF2-1/500" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:500"><svg version="1.1" viewBox="0 -335 510 1253"><symbol id="CFF2-1/500.dollar" overflow="visible"><path d="M250,35 C206,35 164,42 118,61 L176,21 L161,99 C150,152 128,166 100,166 C77,166 61,154 51,131 C54,43 133,-14 246,-14 C388,-14 473,64 473,171 C473,258 429,321 294,370 L257,383 C188,406 150,437 150,498 C150,571 204,605 275,605 C308,605 342,600 386,582 L327,620 L342,546 C354,489 382,475 407,475 C428,475 447,486 455,511 C450,597 369,655 264,655 C140,655 56,575 56,473 C56,372 119,318 226,278 L262,265 C344,235 379,208 379,145 C379,76 329,35 250,35 Z M288,320 L288,746 L242,746 L242,320 Z M239,-115 L286,-115 L286,320 L239,320 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/500.dollar" /></svg></td>

    <td class="expected" ft:id="CFF2-1/600" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:600"><svg version="1.1" viewBox="0 -335 520 1253"><symbol id="CFF2-1/600.dollar" overflow="visible"><path d="M252,36 C203,36 165,43 118,63 L180,20 L166,100 C157,152 135,168 104,168 C80,168 61,156 51,129 C53,41 130,-15 249,-15 C395,-15 483,64 483,172 C483,263 437,324 301,374 L265,387 C197,411 160,440 160,498 C160,568 212,601 282,601 C316,601 349,596 394,577 L330,617 L345,544 C356,484 386,470 414,470 C435,470 457,481 464,510 C460,595 379,652 270,652 C139,652 56,572 56,470 C56,368 118,314 228,272 L263,259 C343,229 376,203 376,140 C376,75 328,36 252,36 Z M295,319 L295,743 L244,743 L244,319 Z M240,-115 L292,-115 L292,319 L240,319 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/600.dollar" /></svg></td>

    <td class="expected" ft:id="CFF2-1/700" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:700"><svg version="1.1" viewBox="0 -335 530 1253"><symbol id="CFF2-1/700.dollar" overflow="visible"><path d="M254,37 C201,37 165,45 118,66 L184,20 L171,101 C163,153 141,170 107,170 C83,170 62,157 51,128 C52,39 128,-15 252,-15 C402,-15 493,65 493,173 C493,268 444,327 308,379 L273,392 C206,416 171,442 171,497 C171,566 221,597 288,597 C324,597 356,592 403,572 L334,613 L347,542 C358,478 390,464 421,464 C443,464 467,477 473,508 C470,593 388,649 277,649 C139,649 55,569 55,466 C55,364 118,309 229,266 L263,253 C341,223 373,199 373,136 C373,75 327,37 254,37 Z M303,317 L303,740 L246,740 L246,317 Z M242,-115 L298,-115 L298,317 L242,317 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/700.dollar" /></svg></td>

    <td class="expected" ft:id="CFF2-1/800" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:800"><svg version="1.1" viewBox="0 -335 540 1253"><symbol id="CFF2-1/800.dollar.nostroke" overflow="visible"><path d="M256,37 C199,37 166,46 118,68 L188,19 L177,102 C170,154 148,172 111,172 C86,172 63,159 51,126 C52,37 126,-16 255,-16 C409,-16 503,66 503,174 C503,273 450,325 315,383 L281,398 C221,423 190,448 190,499 C190,564 234,593 294,593 C333,593 363,588 411,567 L337,610 L349,540 C360,473 394,459 427,459 C451,459 476,472 482,507 C480,591 398,646 283,646 C141,646 57,566 57,463 C57,360 121,310 231,261 L264,247 C336,215 366,191 366,133 C366,77 321,37 256,37 Z M310,619 L310,737 L249,737 L249,619 Z M250,-115 L311,-115 L311,13 L250,13 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/800.dollar.nostroke" /></svg></td>

    <td class="expected" ft:id="CFF2-1/900" ft:render="$"
        ft:font="AdobeVFPrototype-Subset.otf" ft:var="wght:900"><svg version="1.1" viewBox="0 -335 550 1253"><symbol id="CFF2-1/900.dollar.nostroke" overflow="visible"><path d="M258,38 C197,38 166,48 118,71 L192,19 L182,103 C176,155 154,174 114,174 C89,174 64,160 51,125 C51,35 124,-16 258,-16 C416,-16 513,67 513,175 C513,278 457,327 322,388 L289,403 C231,428 203,451 203,499 C203,562 244,589 300,589 C341,589 370,584 420,562 L340,607 L351,538 C362,467 398,453 434,453 C459,453 486,467 491,505 C490,589 407,643 289,643 C141,643 57,563 57,460 C57,356 121,307 232,255 L264,241 C333,209 362,186 362,129 C362,77 319,38 258,38 Z M317,615 L317,734 L251,734 L251,615 Z M253,-115 L319,-115 L319,13 L253,13 Z" /></symbol><use x="0" y="0" xlink:href="#CFF2-1/900.dollar.nostroke" /></svg></td>
  </tr>
  <tr>
    <th>Observed</th>
    <td class="observed" ft:id="CFF2-1/100"/>
    <td class="observed" ft:id="CFF2-1/200"/>
    <td class="observed" ft:id="CFF2-1/300"/>
    <td class="observed" ft:id="CFF2-1/400"/>
    <td class="observed" ft:id="CFF2-1/500"/>
    <td class="observed" ft:id="CFF2-1/600"/>
    <td class="observed" ft:id="CFF2-1/700"/>
    <td class="observed" ft:id="CFF2-1/800"/>
    <td class="observed" ft:id="CFF2-1/900"/>
  </tr>
  <tr>
    <th class="conformance-header">Conformance</th>
    <td class="conformance" ft:id="CFF2-1/100"/>
    <td class="conformance" ft:id="CFF2-1/200"/>
    <td class="conformance" ft:id="CFF2-1/300"/>
    <td class="conformance" ft:id="CFF2-1/400"/>
    <td class="conformance" ft:id="CFF2-1/500"/>
    <td class="conformance" ft:id="CFF2-1/600"/>
    <td class="conformance" ft:id="CFF2-1/700"/>
    <td class="conformance" ft:id="CFF2-1/800"/>
    <td class="conformance" ft:id="CFF2-1/900"/>
  </tr>

</table>

</body>
</html>
